// components/face-cam/face-cam.js
const api = require('../../utils/api')

Component({
  /**
   * 组件的属性列表
   */
  properties: {

  },

  /**
   * 组件的初始数据
   */
  data: {
    camFlag: false,
    wh: 0,
    score: 90,
    position: 'front',
    src: '',
    token: '',
    faceinfo: {},

    imageHost: '',
    count: 0, // 设置 计数器 初始为0
    countTimer: null, // 设置 定时器 初始为null
    complete: false
  },

  lifetimes: {
    // 生命周期函数，可以为函数，或一个在methods段中定义的方法名
    attached: function () {
      // 获取设备的信息
      this.getWH()

    },
  },
  pageLifetimes: {
    show() {
      
    }
  },
  /**
   * 组件的方法列表
   */
  methods: {
    //获取页面高度
    getWH() {
      const sysinfo = wx.getSystemInfoSync()
      this.setData({
        wh: sysinfo.windowHeight
      })
    },
    // 切换摄像头
    reverse() {
      this.setData({
        position: this.data.position === 'back' ? 'front' : 'back'
      })
    },

    // 点击拍照
    takePhoto() {
      console.log("/// 点击拍照 ///")
      // 创建拍照的上下文对象
      const ctx = wx.createCameraContext()
      // 调用 takePhoto 函数拍照
      ctx.takePhoto({
        quality: 'low',
        success: (res) => {
          console.log(res)
          this.setData({
            src: res.tempImagePath
          }, () => {
            // this.getFaceInfo()
            console.log("/// 拍照成功 ///")
            this.processParams()
          })
        }
      })
    },

    // 选择照片
    choosePhoto() {
      wx.chooseImage({
        count: 1,
        sizeType: ['original'],
        sourceType: ['album'],
        success: (res) => {
          if (res.errMsg === 'chooseImage:ok' && res.tempFilePaths.length !== 0) {
            this.setData({
              src: res.tempFilePaths[0]
            }, () => {
              // 获取颜值数据
              console.log("============================")
              this.processParams()
            })
          }
        }
      })
    },
    // 重新拍照
    reChoose() {
      this.setData({
        src: '',
        faceinfo: '',
        token: ''
      })
    },
    // 2. 处理参数
    processParams() {
      const params = {
        // 图片
        image: '',
        // 发送到服务器的图片格式，是 BASE64 这种图片格式
        image_type: 'BASE64',
        // 希望颜值检测完毕后，服务器返回哪些颜值数据
        face_field: 'age,gender,beauty,expression,glasses,emotion'
      }

      // 根据图片路径，把图片转为 base64 格式，然后，赋值给 params.image
      const fileManager = wx.getFileSystemManager()
      fileManager.readFile({
        // 要读取哪个文件
        filePath: this.data.src,
        // 以什么格式来读取指定的文件
        encoding: 'base64',
        success: (res) => {
          params.image = res.data
          console.log(res.data)
          // 3. 发送请求，检测人脸数据
          this.testFace(params.image)
        }
      })
    },
    // 3. 上传人脸
    testFace(e) {
      
      wx.showLoading({
        title: '人像识别中…',
      })
      var dto = {
        Image: e
      }
      console.log(dto)
      api.detectLiveFace(dto).then(res => {
        if (res.code === 1) {
          if (res.info.score > 80) {
            //创造人员
            dto.GroupId = 'test'
            dto.PersonName = 'AAA'
            dto.PersonId = res.info.requestId
            api.createPerson(dto).then(res => {
              console.log(res)
              if (res.code === 1) {
                // 更改人脸上传执行
                setTimeout(function () {
                  wx.hideLoading()
                }, 100)
                wx.redirectTo({
                  url: '/pages/face/face?personid=' + dto.PersonId,
                })
              }
            }).catch(e => {
              console.log(e)
            })
          } else {
            this.setData({
              score: 60
            })
            wx.showToast({
              title: '请重新拍摄',
              icon: 'error',
              duration: 2000
            })
          }
        }
      }).catch(e => {
        console.log(e)
      })


    },

    startdrawCanvas() {
      console.log('相机初始化成功')      
    },

    drawProgressbg: function () {
      // 使用 wx.createContext 获取绘图上下文 context
      const query = wx.createSelectorQuery()
      query.in(this).select('#canvasProgressbg').fields({node: true,size: true}).exec((res) => {
        console.log(res)
        const canvas = res[0].node
        canvas.width = 220
        canvas.height = 220
        const ctx = canvas.getContext('2d')
        ctx.lineWidth = 2; // 设置圆环的宽度
        // ctx.strokeStyle='#a9a9a9'; // 设置圆环的颜色
        ctx.strokeStyle = '#fff'
        ctx.lineCap = 'round' // 设置圆环端点的形状
        ctx.beginPath(); //开始一个新的路径
        ctx.arc(110, 110, 100, 0, 2 * Math.PI, false);
        //设置一个原点(100,100)，半径为90的圆的路径到当前路径
        ctx.stroke(); //对当前路径进行描边
      })

    },
    drawCircle: function (step) {
      const query = wx.createSelectorQuery()
      query.in(this).select('#canvasProgress').fields({
        node: true,
        size: true
      }).exec((res) => {
        const canvas = res[0].node
        canvas.width = 220
        canvas.height = 220
        const context = canvas.getContext('2d')
        // 设置渐变
        var gradient = context.createLinearGradient(200, 100, 100, 200);
        gradient.addColorStop("0", "#54E9C5");
        gradient.addColorStop("0.5", "#54E9C5");
        gradient.addColorStop("1.0", "#54E9C5");
        context.lineWidth = 3;
        context.strokeStyle = gradient;
        context.lineCap = 'round';
        context.beginPath();
        // 参数step 为绘制的圆环周长，从0到2为一周 。 -Math.PI / 2 将起始角设在12点钟位置 ，结束角 通过改变 step 的值确定
        context.arc(110, 110, 100, -Math.PI / 2, step * Math.PI - Math.PI / 2, false);
        context.stroke();
        if(step===2){
          this.takePhoto()
        }
      })
    },
    countInterval: function () {
      // 设置倒计时 定时器 每100毫秒执行一次，计数器count+1 ,耗时6秒绘一圈
      this.countTimer = setInterval(() => {
        if (this.data.count <= 60) {
          /* 绘制彩色圆环进度条
          注意此处 传参 step 取值范围是0到2，
          所以 计数器 最大值 60 对应 2 做处理，计数器count=60的时候step=2
          */
          this.drawCircle(this.data.count / (60 / 2))
          this.data.count++;
        } else {
          this.setData({
            complete: true
          });
          clearInterval(this.countTimer);
        }
      }, 100)
      
    },
    complateDis() {
      console.log("///组件：开始拍照///")
      if (wx.createCameraContext()) {
        this.cameraContext = wx.createCameraContext('myCamera')
        this.drawProgressbg();
        this.countInterval();
      } else {
        // 如果希望用户在最新版本的客户端上体验您的小程序，可以这样子提示
        wx.showModal({
          title: '提示',
          content: '当前微信版本过低，无法使用该功能，请升级到最新微信版本后重试。'
        })
      }
    }
  }
})